<template>
  <div>
    <div class="box">
      <h3>欢迎光临</h3>
      <tr>
        <td><h4>苹果10 ￥ /斤，折扣《8折》</h4></td>
        <td>请输入你要购买的斤数 <input type="text" v-model.number="val.sum"> </td>
        <td><button @click="get">结账买单</button></td>
        <td>结账买单：总价<span>{{val.total}}</span>￥元， 折后价<span>{{val.zhe}}</span>￥元，省了<span>{{val.sheng}}</span>￥元</td>

      </tr>

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      val:{
        sum:'',
        total:0,
        sheng:0,
        zhe:0
      }
    }
  },methods: {
    get(){
      this.val.total = this.val.sum * 10
      this.val.sheng = this.val.sum * 10 - this.val.sum * 10 * 0.8
      this.val.zhe = this.val.sum * 10 *0.8

    }
  },
//  computed:{
//   total(){
//     return this.val.sum * 10
//   },
//   zhe(){
//     return this.val.sum * 10 * 0.8
//   },
//   sheng(){
//    return  this.val.sum * 10 - this.val.sum * 10 * 0.8
//   }
 }

</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.box{
  width: 600px;
  height: 200px;
  border: 1px solid black;
  margin: 0 auto;
  text-align: center;
  padding: 5px;
}
tr{
  width: 100%;
  display: block;
}
td{
  
  display: block;
  width: 100%;
  margin-top: 5px;
  border: 2px solid black;
}
</style>